﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Route</title>
</head>
<body>
    <script src="@Url.Content("~/Scripts/vue.js")"></script>
    <script src="@Url.Content("~/Scripts/vue-resource.min.js")"></script>
    <script src="~/Scripts/vue-router.min.js"></script>
    <script id="login" type="text/template">
        <form onsubmit="return false;" v-on:submit="login">
            <h2>登录</h2>
            <input type="text" v-model="user.LoginName" placeholder="登录名" />
            <input type="text" v-model="user.Password" placeholder="密码" />
            <button type="submit">登录</button>
        </form>
    </script>
    <script id="regist" type="text/template">
        <form onsubmit="return false;" v-on:submit="regist">
            <h2>注册</h2>
            <input type="text" v-model="user.LoginName" placeholder="登录名" />
            <input type="text" v-model="user.Password" placeholder="密码" />
            <button type="submit">注册</button>
        </form>
    </script>
    <div id="app" style="border:1px solid red;">
            <h1>Hello App!</h1>
            <p>
                <!-- 使用指令 v-link 进行导航。 -->
                <a v-link="{ path: '/login' }">Go to Login</a>
                <a v-link="{ path: '/regist' }">Go to Regist</a>
            </p>
            <!-- 路由外链 -->
            <router-view></router-view>
        </div>
    <script>
        var LoginComponent = Vue.extend({
            data: function () {
                return { user: {} };
            },
            template: "#login",
            computed: {
                result: function () {
                    return JSON.stringify(this.user);
                }
            },
            methods: {
                login: function () {
                    console.log(this.result);
                }
            }
        })
        var RegistComponent = Vue.extend({
            data: function () {
                return { user: {} };
            },
            template: "#regist",
            computed: {
                result: function () {
                    return JSON.stringify(this.user);
                }
            },
            methods: {
                regist: function () {
                    console.log(this.result);
                }
            }
        })
        Vue.component('login-component', LoginComponent);
        Vue.component('regist-component', RegistComponent)
      
        var App = {}
        var router = new VueRouter();
        router.map({
            '/': {
                component: LoginComponent
            },
            '/login': {
                component: LoginComponent
            },
            '/regist': {
                component: RegistComponent
            }
        })
        router.start(App, '#app')
    </script>
</body>

</html>
